<template>
	<div class="padding-across-10">
		<div class="list" v-if="!isMobile">
			<p class="panel_title">区域列表</p>
			<el-tree :show-overflow-tooltip="true" style="height: 450px;overflow: auto;border: 0" ref="tree" :data="districtsDatas" :props="defaultProps" node-key="DistrictKeyId" :current-node-key="currentNodeKey" :highlight-current="true" :default-expanded-keys="defaultExpandedKeys" :expand-on-click-node="false" @node-click="handleNodeClick">
			</el-tree>
		</div>
        <div v-else>
            <div class="areaSwitch" @click="showAreaTree">区域选择</div>
            <el-drawer
                title="我是标题"
                :modal="true"
                :append-to-body="true"
                :visible.sync="areaTreeShow"
                direction="ltr"
                size="70%"
                :with-header="false">
                <div class="list" style="width: 100%;">
                    <p class="panel_title">区域列表</p>
                    <el-tree :show-overflow-tooltip="true" style="height: 450px;overflow: auto;border: 0" ref="tree" :data="districtsDatas" :props="defaultProps" node-key="DistrictKeyId" :current-node-key="currentNodeKey" :highlight-current="true" :default-expanded-keys="defaultExpandedKeys" :expand-on-click-node="false" @node-click="handleNodeClick">
                    </el-tree>
                </div>
            </el-drawer>
        </div>
		<div class="deviceBox" v-loading="loading" element-loading-text="拼命加载中">
			<div style="width: 100%;padding-bottom: 3px;">
				<el-row>
					<el-col :span="18">
						<headerOpreate style="margin-bottom: 10px;" :opreate-datas="opreateDatas" v-on:executeAction="executeAction"></headerOpreate>
					</el-col>
					<el-col :span="6">
						<div style="text-align: right">
							<i class="fa fa-circle" style="color:#13ce66"></i>
							<span style="font-size: 16px">{{'在线('+onlineTotal+')'}}</span>
							<i class="fa fa-circle" style="color: #48576a"></i>
							<span style="font-size: 16px">{{'离线('+offlineTotal+')'}}</span>
						</div>
					</el-col>
				</el-row>
			</div>
			<div style="width: 100%;padding-bottom: 3px">
				<div style="margin-bottom: 3px">
					<span class="mb5" style="font-size: 13px;font-weight: bold">状态</span>
					<el-select class="mb5" v-model="onLine" placeholder="请选择" size="small" style="width: 80px" @change="selectOnOFF">
						<el-option label="全部" :value="0"></el-option>
						<el-option label="在线" :value="1"></el-option>
						<el-option label="离线" :value="2"></el-option>
					</el-select>
					<span class="mb5" style="font-size: 13px;font-weight: bold">设备种类</span>
					<el-select class="mb5" style="width: 120px" size="small" v-model="deviceType" placeholder="请选择设备类型" @change="selectDeviceType">
						<el-option v-for="item in deviceTypeDatas" :key="item.name" :label="item.value" :value="item.name">
						</el-option>
					</el-select>
					<span class="mb5" style="font-size: 13px;font-weight: bold">检索字段</span>
					<el-select class="mb5" size="small" v-model="searchType" :placeholder="$t('message.selectModeAlert')" style="width: 90px;margin-right: 2px">
						<el-option label="设备名" :value="0"></el-option>
						<el-option label="设备码" :value="1"></el-option>
					</el-select>
					<span style="font-size: 13px;font-weight: bold">关键字</span>
					<el-input size="small" style="width: 160px;" class="inline-input" v-model="searchModel" placeholder="查询关键字"></el-input>
					<el-button size="small" type="primary" @click="findDistrictDevices"><i class="el-icon-search el-icon--left"></i>查询</el-button>
				</div>
			</div>
			<el-tabs v-model="activeName" type="border-card">
				<el-tab-pane name="first">
					<span slot="label"><i class="el-icon-eleg-icon_ul el-icon--left"></i> 列表模式</span>
					<div style="float: left;padding-bottom: 3px;">
						<!-- 空开操作按钮 -->
						<el-dropdown v-if="deviceType === 'EBox'" trigger="click" @command="batchAirSwitch">
							<el-button type="primary" size="small">
								智慧空开<i class="el-icon-caret-bottom el-icon--right"></i>
							</el-button>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item command="open">批量开启</el-dropdown-item>
								<el-dropdown-item command="close">批量关闭</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
						<!-- 微图操作按钮 -->
						<el-button v-if="deviceType === 'WeiTu'" size="small" type="success" @click="multiWTRestart"><i class="el-icon-eleg-icon_check_alt el-icon--left"></i>重启</el-button>
						<el-button v-if="deviceType === 'WeiTu'" size="small" type="danger" @click="multiWTClose"><i class="el-icon-eleg-icon_close_alt el-icon--left"></i>关机</el-button>
						<!-- 自助借还书机操作按钮 -->
						<el-button v-if="deviceType === 'Self_ServiceMachine'" size="small" type="success" @click="multiSTRestart"><i class="el-icon-eleg-icon_check_alt el-icon--left"></i>重启</el-button>
						<el-button v-if="deviceType === 'Self_ServiceMachine'" size="small" type="danger" @click="multiSTClose"><i class="el-icon-eleg-icon_close_alt el-icon--left"></i>关机</el-button>
						<!-- 智能终端操作按钮 -->
						<el-button v-if="deviceType === 'MultimediaIT'" size="small" type="success" @click="multiTCStartClass"><i class="el-icon-eleg-icon_check_alt el-icon--left"></i>上课</el-button>
						<el-button v-if="deviceType === 'MultimediaIT'" size="small" type="danger" @click="multiTCCloseClass"><i class="el-icon-eleg-icon_close_alt el-icon--left"></i>下课</el-button>
						<el-button v-if="deviceType === 'MultimediaIT'" size="small" type="success" @click="multiTCUnlockScreen"><i class="el-icon-eleg-icon_lock-open el-icon--left"></i>解锁</el-button>
						<el-button v-if="deviceType === 'MultimediaIT'" size="small" type="danger" @click="multiTCLockScreen"><i class="el-icon-eleg-icon_lock el-icon--left"></i>锁屏</el-button>
						<!--电脑操作按钮-->
						<el-button v-if="deviceType === 'PC'" size="small" type="success" @click="multiPCRestart"><i class="el-icon-eleg-icon_check_alt el-icon--left"></i>重启</el-button>
						<el-button v-if="deviceType === 'PC'" size="small" type="danger" @click="multiPCClose"><i class="el-icon-eleg-icon_close_alt el-icon--left"></i>关机</el-button>
					</div>
					<el-table ref="table" border style="width: 100%;" @selection-change="handleSelectionChange" :data="tableData">
						<el-table-column :show-overflow-tooltip="true" type="selection"></el-table-column>
						<el-table-column :show-overflow-tooltip="true" v-if="Ukeyid!=167" label="名称" align="center" prop="name"></el-table-column>
						<el-table-column :show-overflow-tooltip="true" label="型号" align="center" prop="model"></el-table-column>
						<!-- <el-table-column label="位置" align="center"></el-table-column> -->
						<el-table-column :show-overflow-tooltip="true" label="区域名称" align="center" prop="districtName"></el-table-column>
						<el-table-column :show-overflow-tooltip="true" label="状态" align="center">
							<template slot-scope="scope">
								<!-- <i v-if="scope.row.online && scope.row.istrouble" class="el-icon-eleg-icon_error-triangle" style="color: red;cursor: pointer" :title="scope.row.troubleReason"></i> -->
								<el-tag v-if="scope.row.online" type="success">
									<li class="el-icon-circle-check el-icon--left"></li>在线</el-tag>
								<el-tag v-if="!scope.row.online" type="gray">
									<li class="el-icon-circle-close el-icon--left"></li>离线
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column :show-overflow-tooltip="true" :label="$t('message.operation')" align="center">
							<template slot-scope="scope">
								<el-button type="primary" size="small" @click="showDetail(scope.row)">
									<li class="el-icon-information el-icon--left"></li>详情
								</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-tab-pane>
				<el-tab-pane name="second">
					<span slot="label"><i class="el-icon-eleg-icon_image el-icon--left"></i> 图标模式</span>
					<el-row :gutter="10">
						<el-col :span="isMobile ? 24 : 6" v-for="(item, index) in tableData" style="margin-top: 3px" :key="index">
							<div class="grid-content1 bg-purple" @click="showDetail(item)">
								<div class="detail-section">
									<div class="section-top">
										<div class="panel-title">
											<span>{{item.name}}</span>
										</div>
									</div>
									<div class="section-bottom">
										<div class="section-left">
											<div class="img" v-if="item.category === 'WeiTu'">
												<img v-if="item.online" src="../../../../assets/images/wt01-01a-online.png">
												<img v-else src="../../../../assets/images/wt01-01a-offline.png">
											</div>
											<div class="img" v-if="item.category === 'BookCorner'">
												<img v-if="item.online" src="../../../../assets/images/bookCorner-online.png">
												<img v-else src="../../../../assets/images/bookCorner-offline.png">
											</div>
											<div class="img" v-if="item.category === 'MultimediaIT'">
												<img v-if="item.online" src="../../../../assets/images/TC1000-online.png">
												<img v-else src="../../../../assets/images/TC1000-offline.png">
											</div>
											<div class="img" v-if="item.category === 'Self_ServiceMachine'">
												<img v-if="item.online" src="../../../../assets/images/ST02-05A-online.png">
												<img v-else src="../../../../assets/images/ST02-05A-offline.png">
											</div>
											<div class="img" v-if="item.category === 'SafetyGate'">
												<img v-if="item.online" src="../../../../assets/images/LS406-online.png">
												<img v-else src="../../../../assets/images/LS406-offline.png">
											</div>
											<div class="img" v-if="item.category === 'VideoMonitor'">
												<img v-if="item.online" src="../../../../assets/images/record-online.png">
												<img v-else src="../../../../assets/images/record-offline.png">
											</div>
											<div class="img" v-if="item.category === 'WirelessGateway'">
												<img v-if="item.online" src="../../../../assets/images/A1-online.png">
												<img v-else src="../../../../assets/images/A1-offline.png">
											</div>
											<div class="img" v-if="item.category === 'PC'">
												<img v-if="item.online" src="../../../../assets/images/pc-online.png">
												<img v-else src="../../../../assets/images/pc-offline.png">
											</div>
											<div class="img" v-if="item.category === 'ZNSJ'">
												<img v-if="item.online" src="../../../../assets/images/znsj-online.png">
												<img v-else src="../../../../assets/images/znsj-offline.png">
											</div>
											<div class="img" v-if="item.category === 'EBox'">
												<img v-if="item.online2" src="../../../../assets/images/airSwitch.png">
												<img v-else src="../../../../assets/images/airSwitch_close.png">
											</div>
										</div>
										<div class="section-right">
											<div>
												<small>
													<span>状态：</span>
													<el-tag v-if="item.online" type="success"><li class="el-icon-circle-check el-icon--left"></li>在线</el-tag>
													<el-tag v-if="!item.online" type="gray"><li class="el-icon-circle-close el-icon--left"></li>离线</el-tag>
												</small>
											</div>
											<div>
												<small>型号：{{item.model}}</small>
											</div>
											<div>
												<small>区域：{{item.districtName}}</small>
											</div>
										</div>
									</div>
								</div>
							</div>
						</el-col>
					</el-row>
				</el-tab-pane>
			</el-tabs>
			<div class="block" style="text-align:right;margin-bottom:10px;width: 100%; overflow: scroll;">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize" layout="total, sizes,prev, pager, next, jumper" :total="totalSize">
				</el-pagination>
			</div>
		</div>
		<!-- 控制记录详情 -->
		<el-dialog title="设备控制结果" v-model="controlDetailDialog" :class="[dialog-large-width]">
			<el-table border style="width: 100%;" :data="controlResultDatas">
				<el-table-column label="设备名" align="center" prop="name"></el-table-column>
				<el-table-column label="型号" align="center" prop="model"></el-table-column>
				<el-table-column label="设备码" align="center" prop="sn"></el-table-column>
				<el-table-column label="状态" align="center">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.online" type="success">
							<li class="el-icon-circle-check el-icon--left"></li>在线
						</el-tag>
						<el-tag v-else type="gray">
							<li class="el-icon-circle-close el-icon--left"></li>离线
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="控制结果" align="center">
					<template slot-scope="scope">
						<el-tag type="success" v-if="scope.row.online">成功</el-tag>
						<el-tag type="danger" v-else>失败</el-tag>
						<!-- <el-tag type="danger" v-if="scope.row.resultCode === -2">无响应</el-tag> -->
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>
		<!-- 修改设备绑定区域 -->
		<el-dialog title="修改设备绑定区域" v-model="changeDistrictDialog" :class="[dialog-tiny-width]" @close="closeDialog">
			<el-tree show-checkbox check-strictly :show-overflow-tooltip="true" style="height: 300px;overflow: auto;border: 0" ref="treeForm" :data="changeDistrictDatas" :props="defaultProps" node-key="DistrictKeyId" :current-node-key="changeDistrictNodeKey" :highlight-current="true" :expand-on-click-node="false" @check-change="changeDistrictClick">
			</el-tree>
			<div slot="footer" class="dialog-footer">
				<el-button size="small" @click="changeDistrictDialog = false">取 消</el-button>
				<el-button size="small" type="primary" @click="confirmChangeDistrict">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import $ from "jquery";
	import { GloabFun, HttpServer } from "../../../../assets/js/common.js";
	import headerOpreate from "../../../../components/headerOpreate";
	let id = 1000;
	export default {
		components: {
			headerOpreate
		},
		computed:{
			Ukeyid(){
				return GloabFun.getKeyId()
			}
		},
		data() {
			return {
                areaTreeShow: false,
				searchType: 0,
				searchModel: "",
				i: 0, //修改区域时区域要单选，作为标志位使用
				changeDistrictDialog: false,
				changeDistrictNodeKey: null,
				changeDistrictDatas: [],
				controlResultDatas: [],
				controlDetailDialog: false,
				modelArr: [],
				flag: false,
				deviceTypeDatas: [],
				deviceType: "",
				activeName: "first",
				currentNodeKey: null,
				districtsDatas: [],
				defaultExpandedKeys: [],
				loading: false,
				data: [],
				onLine: 0,
				dynamicTags: [],
				inputVisible: false,
				inputValue: "",
				offlineTotal: "0",
				onlineTotal: "0",
				tableData: [],
				defaultProps: {
					children: "Children",
					label: "Name",
					id: "Id"
				},
				multipleSelection: [],
				currentPage: 1,
				pageSize: 10,
				totalSize: 0,
				opreateDatas: [{
						show: true,
						size: "small",
						type: "primary",
						icon: "el-icon-eleg-icon_refresh el-icon--left",
						name: this.$t("message.refresh"),
						action: "reloadDatas"
					},
					{
						show: true,
						size: "small",
						type: "primary",
						icon: "el-icon-setting el-icon--left",
						name: "修改绑定区域",
						action: "changeDistrict"
					},
					{
						show: true,
						type: "primary",
						size: "small",
						icon: "el-icon-time el-icon--left",
						name: "智能终端定时任务",
						action: "intelligenceClose"
					},
					{
						show: true,
						type: "primary",
						size: "small",
						icon: "el-icon-eleg-icon_lightbulb el-icon--left",
						name: "照明设备",
						action: "goLightControl"
					},
					{
						show: true,
						type: "primary",
						size: "small",
						icon: "el-icon-eleg-icon_camera el-icon--left",
						name: "投影机/一体机",
						action: "goProjectorControl"
					},
					{
						show: true,
						type: "primary",
						size: "small",
						icon: "el-icon-eleg-social_rss el-icon--left",
						name: "空调",
						action: "goAirConditionControl"
					},
					{
						show: true,
						type: "danger",
						size: "small",
						icon: "el-icon-delete2 el-icon--left",
						name: "删除",
						action: "deleteMultiple"
					}
				],
				districtForm: {
					// name:'',
					districtid: ""
				}
			};
		},
		props: {
			templateObj: {
				type: Object,
				default: function() {
					return {};
				}
			}
		},
		methods: {
            showAreaTree(){
                this.areaTreeShow = true
            },
			executeAction(action) {
				if(action) {
					this[action]();
				}
			},
			batchAirSwitch(op) {
				if(this.multipleSelection.length === 0) {
					this.$notify({
						title: this.$t("message.warning"),
						message: "请选择批量操作的设备",
						type: "warning",
						duration: 2500
					});
					return;
				}
				let macs = [];
				this.multipleSelection.forEach(item => {
					if(item.category !== "EBox") {
						this.$notify({
							title: this.$t("message.warning"),
							message: "请选择空开设备",
							type: "warning",
							duration: 2500
						});
						return;
					} else {
						if(!item.online2) {
							return;
						} else {
							macs.push(item.sn);
						}
					}
				});
				let params = {
					macs: macs,
					op: op
				};
				HttpServer.httpPost.call(
					this,
					"/Api/AirSwitch/BatchControlEBox",
					params,
					res => {},
					res => {
						if(res.data.length > 0) {
							res.data.forEach(r => {
								if(r.code === 0) {
									this.$notify({
										title: this.$t("message.success"),
										message: "批量控制成功",
										type: "success",
										duration: 2500
									});
									return;
								} else {
									this.$notify({
										title: this.$t("message.warning"),
										message: r.message,
										type: "warning",
										duration: 2500
									});
									return;
								}
							});
						}
					}
				);
			},
			//获取选中设备的keyid
			formateSelection() {
				var result = [],
					array = this.multipleSelection;
				for(var i = 0; i < array.length; i++) {
					result.push(array[i].keyid);
				}
				return result;
			},
			//修改设备绑定区域
			changeDistrict() {
				if(this.formateSelection().length > 0) {
					clearInterval(this.deviceIntervalid);
					HttpServer.httpGet.call(
						this,
						"/Api/District/districtTree?uid=" + parseInt(GloabFun.getKeyId()),
						function(response) {},
						function(response) {
							if(response.data.code === 0) {
								if(response.data.info.length > 0) {
									this.changeDistrictDatas = this.sortDatas(response.data.info);
								}
							} else {
								this.$notify.error({
									title: "错误",
									message: response.data.msg,
									duration: 2500
								});
							}
						}
					);
					this.changeDistrictDialog = true;
				} else {
					this.$notify({
						title: this.$t("message.warning"),
						message: "请选择批量操作的项",
						type: "warning",
						duration: 2500
					});
				}
			},
			changeDistrictClick(data, checked, node) {
				this.i++;
				if(this.i % 2 == 0) {
					if(checked) {
						this.$refs.treeForm.setCheckedNodes([]);
						this.$refs.treeForm.setCheckedNodes([data]);
					} else {
						this.$refs.treeForm.setCheckedNodes([]);
					}
				}
			},
			closeDialog() {
				this.deviceIntervalid = setInterval(() => {
					HttpServer.httpPost.call(
						this,
						"/Api/District/GetDevices", {
							userKeyId: parseInt(GloabFun.getKeyId()),
							districtid: this.districtForm.districtid,
							index: this.currentPage,
							pagesize: this.pageSize,
							isonline: this.onLine,
							category: this.modelArr,
							qDeviceName: this.searchType === 0 ? this.searchModel : "",
							qDeviceSn: this.searchType === 1 ? this.searchModel : "",
							model: []
						},
						function(res) {},
						function(res) {
							if(res.data.code === 0) {
								this.tableData = res.data.info;
								this.totalSize = res.data.totalcount;
								this.onlineTotal = res.data.onlinecount;
								this.offlineTotal = res.data.offlinecount;
							} else {}
						}
					);
				}, 5000);
			},
			confirmChangeDistrict() {
				if(this.$refs.treeForm.getCheckedKeys().length > 0) {
					this.$confirm("此操作将删除所选设备绑定的区域，是否继续?", "提示", {
							confirmButtonText: "确定",
							cancelButtonText: "取消",
							type: "warning"
						})
						.then(() => {
							var param = {
								keyid: this.formateSelection(),
								districtid: this.$refs.treeForm.getCheckedKeys()[0],
								UserId: parseInt(GloabFun.getKeyId())
							};
							HttpServer.httpPost.call(
								this,
								"/Api/Device/UpdateDistrict",
								param,
								function(response) {},
								function(response) {
									if(response.data.code === 0) {
										this.changeDistrictDialog = false;
										this.deviceIntervalid = setInterval(() => {
											HttpServer.httpPost.call(
												this,
												"/Api/District/GetDevices", {
													userKeyId: parseInt(GloabFun.getKeyId()),
													districtid: this.districtForm.districtid,
													index: this.currentPage,
													pagesize: this.pageSize,
													isonline: this.onLine,
													category: this.modelArr,
													qDeviceName: this.searchType === 0 ? this.searchModel : "",
													qDeviceSn: this.searchType === 1 ? this.searchModel : "",
													model: []
												},
												function(res) {},
												function(res) {
													if(res.data.code === 0) {
														this.tableData = res.data.info;
														this.totalSize = res.data.totalcount;
														this.onlineTotal = res.data.onlinecount;
														this.offlineTotal = res.data.offlinecount;
													} else {}
												}
											);
										}, 5000);
									} else {
										this.$notify.error({
											title: "错误",
											message: response.data.msg,
											duration: 2500
										});
									}
								}
							);
						})
						.catch(() => {
							this.$notify.info({
								title: "消息",
								message: this.$t("message.cancleOperation"),
								duration: 2500
							});
						});
				} else {
					this.$notify({
						title: this.$t("message.warning"),
						message: "请选择目标区域",
						type: "warning",
						duration: 2500
					});
				}
			},

			intelligenceClose() {
				this.$emit("changeView", "IntelligenceTimeClose", {});
			},
			goLightControl() {
				this.$emit("changeView", "lightControl", {});
			},
			goProjectorControl() {
				this.$emit("changeView", "projectorControl", {});
			},
			goAirConditionControl() {
				this.$emit("changeView", "airConditionControl", {});
			},
			handleNodeClick(data) {
				// this.districtForm.name = data.Name;
				this.districtForm.districtid = data.DistrictKeyId;
				this.currentNodeKey = data.DistrictKeyId;
				this.findDistrictDevices();
                this.areaTreeShow = false
			},
			//获取选中设备的sn
			formateSelection2() {
				var result = [],
					array = this.multipleSelection;
				for(var i = 0; i < array.length; i++) {
					result.push(array[i].sn);
				}
				return result;
			},
			//微图批量重启
			multiWTRestart() {
				if(this.formateSelection2().length > 0) {
					clearInterval(this.deviceIntervalid);
					this.$confirm("此操作将重启所选智能微图设备，是否继续?", "提示", {
							confirmButtonText: "确定",
							cancelButtonText: "取消",
							type: "warning"
						})
						.then(() => {
							this.loading = true;
							this.controlResultDatas = this.multipleSelection;
							this.$nextTick(function() {
								HttpServer.httpPost.call(
									this,
									"/Api/Peripheral/WTControl", {
										sn: this.formateSelection2(),
										op: 2,
										version: ""
									},
									function(response) {},
									function(response) {
										this.loading = false;
										if(response.data.code === 0) {
											if(response.data.response.length === 0) {
												this.controlResultDatas.forEach(function(item) {
													item.resultCode === -2;
												});
											} else {
												let vm = this;
												response.data.response.forEach(function(item1) {
													vm.controlResultDatas.forEach(function(item2) {
														if(item1.sn === item2.sn || item1.code === 0) {
															item2.resultCode === 0;
														} else {
															item2.resultCode === -1;
														}
													});
												});
											}
											this.controlDetailDialog = true;
										} else {
											this.$notify.error({
												title: "错误",
												message: response.data.msg,
												duration: 2500
											});
										}
										this.deviceIntervalid = setInterval(() => {
											HttpServer.httpPost.call(
												this,
												"/Api/District/GetDevices", {
													userKeyId: parseInt(GloabFun.getKeyId()),
													districtid: this.districtForm.districtid,
													index: this.currentPage,
													pagesize: this.pageSize,
													isonline: this.onLine,
													category: this.modelArr,
													qDeviceName: this.searchType === 0 ? this.searchModel : "",
													qDeviceSn: this.searchType === 1 ? this.searchModel : "",
													model: []
												},
												function(res) {},
												function(res) {
													if(res.data.code === 0) {
														this.tableData = res.data.info;
														this.totalSize = res.data.totalcount;
														this.onlineTotal = res.data.onlinecount;
														this.offlineTotal = res.data.offlinecount;
													} else {}
												}
											);
										}, 8000);
									}
								);
							});
						})
						.catch(() => {
							this.$notify.info({
								title: "消息",
								message: this.$t("message.operationCanceled"),
								duration: 2500
							});
						});
				} else {
					this.$notify({
						title: this.$t("message.warning"),
						message: "请选择批量操作的设备",
						type: "warning",
						duration: 2500
					});
				}
			},
			//微图批量关机
			multiWTClose() {
				if(this.formateSelection2().length > 0) {
					clearInterval(this.deviceIntervalid);
					this.$confirm("此操作将关闭所选智能微图设备，是否继续?", "提示", {
							confirmButtonText: "确定",
							cancelButtonText: "取消",
							type: "warning"
						})
						.then(() => {
							this.loading = true;
							this.controlResultDatas = this.multipleSelection;
							this.$nextTick(function() {
								HttpServer.httpPost.call(
									this,
									"/Api/Peripheral/WTControl", {
										sn: this.formateSelection2(),
										op: 1,
										version: ""
									},
									function(response) {},
									function(response) {
										this.loading = false;
										if(response.data.code === 0) {
											if(response.data.response.length === 0) {
												this.controlResultDatas.forEach(function(item) {
													item.resultCode === -2;
												});
											} else {
												let vm = this;
												response.data.response.forEach(function(item1) {
													vm.controlResultDatas.forEach(function(item2) {
														if(item1.sn === item2.sn || item1.code === 0) {
															item2.resultCode === 0;
														} else {
															item2.resultCode === -1;
														}
													});
												});
											}
											this.controlDetailDialog = true;
										} else {
											this.$notify.error({
												title: "错误",
												message: response.data.msg,
												duration: 2500
											});
										}
										this.deviceIntervalid = setInterval(() => {
											HttpServer.httpPost.call(
												this,
												"/Api/District/GetDevices", {
													userKeyId: parseInt(GloabFun.getKeyId()),
													districtid: this.districtForm.districtid,
													index: this.currentPage,
													pagesize: this.pageSize,
													isonline: this.onLine,
													category: this.modelArr,
													qDeviceName: this.searchType === 0 ? this.searchModel : "",
													qDeviceSn: this.searchType === 1 ? this.searchModel : "",
													model: []
												},
												function(res) {},
												function(res) {
													if(res.data.code === 0) {
														this.tableData = res.data.info;
														this.totalSize = res.data.totalcount;
														this.onlineTotal = res.data.onlinecount;
														this.offlineTotal = res.data.offlinecount;
													} else {}
												}
											);
										}, 8000);
									}
								);
							});
						})
						.catch(() => {
							this.$notify.info({
								title: "消息",
								message: this.$t("message.operationCanceled"),
								duration: 2500
							});
						});
				} else {
					this.$notify({
						title: this.$t("message.warning"),
						message: "请选择批量操作的设备",
						type: "warning",
						duration: 2500
					});
				}
			},
			//自助借还机批量重启
			multiSTRestart() {
				if(this.formateSelection2().length > 0) {
					clearInterval(this.deviceIntervalid);
					this.$confirm("此操作将重启所选自助借还机设备，是否继续?", "提示", {
							confirmButtonText: "确定",
							cancelButtonText: "取消",
							type: "warning"
						})
						.then(() => {
							this.loading = true;
							this.controlResultDatas = this.multipleSelection;
							this.$nextTick(function() {
								HttpServer.httpPost.call(
									this,
									"/Api/Peripheral/WTControl", {
										sn: this.formateSelection2(),
										op: 2,
										version: ""
									},
									function(response) {},
									function(response) {
										// console.log('自助借还机批量重启', response);
										this.loading = false;
										if(response.data.code === 0) {
											if(response.data.response.length === 0) {
												this.controlResultDatas.forEach(function(item) {
													item.resultCode === -2;
												});
											} else {
												let vm = this;
												response.data.response.forEach(function(item1) {
													vm.controlResultDatas.forEach(function(item2) {
														if(item1.sn === item2.sn || item1.code === 0) {
															item2.resultCode === 0;
														} else {
															item2.resultCode === -1;
														}
													});
												});
											}
											this.controlDetailDialog = true;
										} else {
											this.$notify.error({
												title: "错误",
												message: response.data.msg,
												duration: 2500
											});
										}
										this.deviceIntervalid = setInterval(() => {
											HttpServer.httpPost.call(
												this,
												"/Api/District/GetDevices", {
													userKeyId: parseInt(GloabFun.getKeyId()),
													districtid: this.districtForm.districtid,
													index: this.currentPage,
													pagesize: this.pageSize,
													isonline: this.onLine,
													category: this.modelArr,
													qDeviceName: this.searchType === 0 ? this.searchModel : "",
													qDeviceSn: this.searchType === 1 ? this.searchModel : "",
													model: []
												},
												function(res) {},
												function(res) {
													if(res.data.code === 0) {
														this.tableData = res.data.info;
														this.totalSize = res.data.totalcount;
														this.onlineTotal = res.data.onlinecount;
														this.offlineTotal = res.data.offlinecount;
													} else {}
												}
											);
										}, 8000);
									}
								);
							});
						})
						.catch(() => {
							this.$notify.info({
								title: "消息",
								message: this.$t("message.operationCanceled"),
								duration: 2500
							});
						});
				} else {
					this.$notify({
						title: this.$t("message.warning"),
						message: "请选择批量操作的设备",
						type: "warning",
						duration: 2500
					});
				}
			},
			//自助借还机批量关闭
			multiSTClose() {
				if(this.formateSelection2().length > 0) {
					clearInterval(this.deviceIntervalid);
					this.$confirm("此操作将关闭所选自助借还机设备，是否继续?", "提示", {
							confirmButtonText: "确定",
							cancelButtonText: "取消",
							type: "warning"
						})
						.then(() => {
							this.loading = true;
							this.controlResultDatas = this.multipleSelection;
							this.$nextTick(function() {
								HttpServer.httpPost.call(
									this,
									"/Api/Peripheral/WTControl", {
										sn: this.formateSelection2(),
										op: 1,
										version: ""
									},
									function(response) {},
									function(response) {
										// console.log('自助借还机批量关机', response);
										this.loading = false;
										if(response.data.code === 0) {
											if(response.data.response.length === 0) {
												this.controlResultDatas.forEach(function(item) {
													item.resultCode === -2;
												});
											} else {
												let vm = this;
												response.data.response.forEach(function(item1) {
													vm.controlResultDatas.forEach(function(item2) {
														if(item1.sn === item2.sn || item1.code === 0) {
															item2.resultCode === 0;
														} else {
															item2.resultCode === -1;
														}
													});
												});
											}
											this.controlDetailDialog = true;
										} else {
											this.$notify.error({
												title: "错误",
												message: response.data.msg,
												duration: 2500
											});
										}
										this.deviceIntervalid = setInterval(() => {
											HttpServer.httpPost.call(
												this,
												"/Api/District/GetDevices", {
													userKeyId: parseInt(GloabFun.getKeyId()),
													districtid: this.districtForm.districtid,
													index: this.currentPage,
													pagesize: this.pageSize,
													isonline: this.onLine,
													category: this.modelArr,
													qDeviceName: this.searchType === 0 ? this.searchModel : "",
													qDeviceSn: this.searchType === 1 ? this.searchModel : "",
													model: []
												},
												function(res) {},
												function(res) {
													if(res.data.code === 0) {
														this.tableData = res.data.info;
														this.totalSize = res.data.totalcount;
														this.onlineTotal = res.data.onlinecount;
														this.offlineTotal = res.data.offlinecount;
													} else {}
												}
											);
										}, 8000);
									}
								);
							});
						})
						.catch(() => {
							this.$notify.info({
								title: "消息",
								message: this.$t("message.operationCanceled"),
								duration: 2500
							});
						});
				} else {
					this.$notify({
						title: this.$t("message.warning"),
						message: "请选择批量操作的设备",
						type: "warning",
						duration: 2500
					});
				}
			},
			//智能终端批量上课
			multiTCStartClass() {
				if(this.formateSelection2().length > 0) {
					clearInterval(this.deviceIntervalid);
					this.$confirm("此操作将对所选设备进行远程上课操作，是否继续?", "提示", {
							confirmButtonText: "确定",
							cancelButtonText: "取消",
							type: "warning"
						})
						.then(() => {
							this.loading = true;
							this.controlResultDatas = this.multipleSelection;
							this.$nextTick(function() {
								HttpServer.httpPost.call(
									this,
									"/Api/Peripheral/ClassSet", {
										sns: this.formateSelection2(),
										operation: 1,
										UserId: parseInt(GloabFun.getKeyId())
									},
									function(response) {},
									function(response) {
										// console.log('智能终端批量上课', response);
										this.loading = false;
										if(response.data.code === 0) {
											if(response.data.response.length === 0) {
												this.controlResultDatas.forEach(function(item) {
													item.resultCode === -2;
												});
											} else {
												let vm = this;
												response.data.response.forEach(function(item1) {
													vm.controlResultDatas.forEach(function(item2) {
														if(item1.sn === item2.sn || item1.code === 0) {
															item2.resultCode === 0;
														} else {
															item2.resultCode === -1;
														}
													});
												});
											}
											this.controlDetailDialog = true;
										} else {
											this.$notify.error({
												title: "错误",
												message: response.data.msg,
												duration: 2500
											});
										}
										this.deviceIntervalid = setInterval(() => {
											HttpServer.httpPost.call(
												this,
												"/Api/District/GetDevices", {
													userKeyId: parseInt(GloabFun.getKeyId()),
													districtid: this.districtForm.districtid,
													index: this.currentPage,
													pagesize: this.pageSize,
													isonline: this.onLine,
													category: this.modelArr,
													qDeviceName: this.searchType === 0 ? this.searchModel : "",
													qDeviceSn: this.searchType === 1 ? this.searchModel : "",
													model: []
												},
												function(res) {},
												function(res) {
													if(res.data.code === 0) {
														this.tableData = res.data.info;
														this.totalSize = res.data.totalcount;
														this.onlineTotal = res.data.onlinecount;
														this.offlineTotal = res.data.offlinecount;
													} else {}
												}
											);
										}, 5000);
									}
								);
							});
						})
						.catch(() => {
							this.$notify.info({
								title: "消息",
								message: this.$t("message.operationCanceled"),
								duration: 2500
							});
						});
				} else {
					this.$notify({
						title: this.$t("message.warning"),
						message: "请选择批量操作的设备",
						type: "warning",
						duration: 2500
					});
				}
			},
			//智能终端批量下课
			multiTCCloseClass() {
				if(this.formateSelection2().length > 0) {
					clearInterval(this.deviceIntervalid);
					this.$confirm("此操作将对所选设备进行远程下课操作，是否继续?", "提示", {
							confirmButtonText: "确定",
							cancelButtonText: "取消",
							type: "warning"
						})
						.then(() => {
							this.loading = true;
							this.controlResultDatas = this.multipleSelection;
							this.$nextTick(function() {
								HttpServer.httpPost.call(
									this,
									"/Api/Peripheral/ClassSet", {
										sns: this.formateSelection2(),
										operation: 0,
										UserId: parseInt(GloabFun.getKeyId())
									},
									function(response) {},
									function(response) {
										// console.log('智能终端批量下课', response);
										this.loading = false;
										if(response.data.code === 0) {
											if(response.data.response.length === 0) {
												this.controlResultDatas.forEach(function(item) {
													item.resultCode === -2;
												});
											} else {
												let vm = this;
												response.data.response.forEach(function(item1) {
													vm.controlResultDatas.forEach(function(item2) {
														if(item1.sn === item2.sn || item1.code === 0) {
															item2.resultCode === 0;
														} else {
															item2.resultCode === -1;
														}
													});
												});
											}
											this.controlDetailDialog = true;
										} else {
											this.$notify.error({
												title: "错误",
												message: response.data.msg,
												duration: 2500
											});
										}
										this.deviceIntervalid = setInterval(() => {
											HttpServer.httpPost.call(
												this,
												"/Api/District/GetDevices", {
													userKeyId: parseInt(GloabFun.getKeyId()),
													districtid: this.districtForm.districtid,
													index: this.currentPage,
													pagesize: this.pageSize,
													isonline: this.onLine,
													category: this.modelArr,
													qDeviceName: this.searchType === 0 ? this.searchModel : "",
													qDeviceSn: this.searchType === 1 ? this.searchModel : "",
													model: []
												},
												function(res) {},
												function(res) {
													if(res.data.code === 0) {
														this.tableData = res.data.info;
														this.totalSize = res.data.totalcount;
														this.onlineTotal = res.data.onlinecount;
														this.offlineTotal = res.data.offlinecount;
													} else {}
												}
											);
										}, 5000);
									}
								);
							});
						})
						.catch(() => {
							this.$notify.info({
								title: "消息",
								message: this.$t("message.operationCanceled"),
								duration: 2500
							});
						});
				} else {
					this.$notify({
						title: this.$t("message.warning"),
						message: "请选择批量操作的设备",
						type: "warning",
						duration: 2500
					});
				}
			},
			//智能终端批量解锁
			multiTCUnlockScreen() {
				if(this.formateSelection2().length > 0) {
					clearInterval(this.deviceIntervalid);
					this.$confirm("此操作将对所选设备进行远程解锁操作，是否继续?", "提示", {
							confirmButtonText: "确定",
							cancelButtonText: "取消",
							type: "warning"
						})
						.then(() => {
							this.loading = true;
							this.controlResultDatas = this.multipleSelection;
							this.$nextTick(function() {
								HttpServer.httpPost.call(
									this,
									"/Api/Peripheral/LockScreen", {
										sns: [this.templateObj.sn],
										operation: 0,
										UserId: parseInt(GloabFun.getKeyId())
									},
									function(response) {},
									function(response) {
										// console.log('智能终端批量远程解锁', response);
										this.loading = false;
										if(response.data.code === 0) {
											if(response.data.response.length === 0) {
												this.controlResultDatas.forEach(function(item) {
													item.resultCode === -2;
												});
											} else {
												let vm = this;
												response.data.response.forEach(function(item1) {
													vm.controlResultDatas.forEach(function(item2) {
														if(item1.sn === item2.sn || item1.code === 0) {
															item2.resultCode === 0;
														} else {
															item2.resultCode === -1;
														}
													});
												});
											}
											this.controlDetailDialog = true;
										} else {
											this.$notify.error({
												title: "错误",
												message: response.data.msg,
												duration: 2500
											});
										}
										this.deviceIntervalid = setInterval(() => {
											HttpServer.httpPost.call(
												this,
												"/Api/District/GetDevices", {
													userKeyId: parseInt(GloabFun.getKeyId()),
													districtid: this.districtForm.districtid,
													index: this.currentPage,
													pagesize: this.pageSize,
													isonline: this.onLine,
													category: this.modelArr,
													qDeviceName: this.searchType === 0 ? this.searchModel : "",
													qDeviceSn: this.searchType === 1 ? this.searchModel : "",
													model: []
												},
												function(res) {},
												function(res) {
													if(res.data.code === 0) {
														this.tableData = res.data.info;
														this.totalSize = res.data.totalcount;
														this.onlineTotal = res.data.onlinecount;
														this.offlineTotal = res.data.offlinecount;
													} else {}
												}
											);
										}, 5000);
									}
								);
							});
						})
						.catch(() => {
							this.$notify.info({
								title: "消息",
								message: this.$t("message.operationCanceled"),
								duration: 2500
							});
						});
				} else {
					this.$notify({
						title: this.$t("message.warning"),
						message: "请选择批量操作的设备",
						type: "warning",
						duration: 2500
					});
				}
			},
			//智能终端批量锁屏
			multiTCLockScreen() {
				if(this.formateSelection2().length > 0) {
					clearInterval(this.deviceIntervalid);
					this.$confirm("此操作将对所选设备进行远程锁屏操作，是否继续?", "提示", {
							confirmButtonText: "确定",
							cancelButtonText: "取消",
							type: "warning"
						})
						.then(() => {
							this.loading = true;
							this.controlResultDatas = this.multipleSelection;
							this.$nextTick(function() {
								HttpServer.httpPost.call(
									this,
									"/Api/Peripheral/LockScreen", {
										sns: [this.templateObj.sn],
										operation: 1,
										UserId: parseInt(GloabFun.getKeyId())
									},
									function(response) {},
									function(response) {
										// console.log('智能终端批量远程锁屏', response);
										this.loading = false;
										if(response.data.code === 0) {
											if(response.data.response.length === 0) {
												this.controlResultDatas.forEach(function(item) {
													item.resultCode === -2;
												});
											} else {
												let vm = this;
												response.data.response.forEach(function(item1) {
													vm.controlResultDatas.forEach(function(item2) {
														if(item1.sn === item2.sn || item1.code === 0) {
															item2.resultCode === 0;
														} else {
															item2.resultCode === -1;
														}
													});
												});
											}
											this.controlDetailDialog = true;
										} else {
											this.$notify.error({
												title: "错误",
												message: response.data.msg,
												duration: 2500
											});
										}
										this.deviceIntervalid = setInterval(() => {
											HttpServer.httpPost.call(
												this,
												"/Api/District/GetDevices", {
													userKeyId: parseInt(GloabFun.getKeyId()),
													districtid: this.districtForm.districtid,
													index: this.currentPage,
													pagesize: this.pageSize,
													isonline: this.onLine,
													category: this.modelArr,
													qDeviceName: this.searchType === 0 ? this.searchModel : "",
													qDeviceSn: this.searchType === 1 ? this.searchModel : "",
													model: []
												},
												function(res) {},
												function(res) {
													if(res.data.code === 0) {
														this.tableData = res.data.info;
														this.totalSize = res.data.totalcount;
														this.onlineTotal = res.data.onlinecount;
														this.offlineTotal = res.data.offlinecount;
													} else {}
												}
											);
										}, 5000);
									}
								);
							});
						})
						.catch(() => {
							this.$notify.info({
								title: "消息",
								message: this.$t("message.operationCanceled"),
								duration: 2500
							});
						});
				} else {
					this.$notify({
						title: this.$t("message.warning"),
						message: "请选择批量操作的设备",
						type: "warning",
						duration: 2500
					});
				}
			},
			//电脑批量重启
			multiPCRestart() {
				if(this.formateSelection2().length > 0) {
					clearInterval(this.deviceIntervalid);
					this.$confirm("此操作将对所选设备进行远程重启操作，是否继续?", "提示", {
							confirmButtonText: "确定",
							cancelButtonText: "取消",
							type: "warning"
						})
						.then(() => {
							this.loading = true;
							this.controlResultDatas = this.multipleSelection;
							this.$nextTick(function() {
								HttpServer.httpPost.call(
									this,
									"/Api/PC/PCRestart", {
										sns: [this.templateObj.sn],
										UserId: parseInt(GloabFun.getKeyId())
									},
									function(response) {},
									function(response) {
										// console.log('电脑批量远程重启', response);
										this.loading = false;
										if(response.data.code === 0) {
											if(response.data.response.length === 0) {
												this.controlResultDatas.forEach(function(item) {
													item.resultCode === -2;
												});
											} else {
												let vm = this;
												response.data.response.forEach(function(item1) {
													vm.controlResultDatas.forEach(function(item2) {
														if(item1.sn === item2.sn || item1.code === 0) {
															item2.resultCode === 0;
														} else {
															item2.resultCode === -1;
														}
													});
												});
											}
											this.controlDetailDialog = true;
										} else {
											this.$notify.error({
												title: "错误",
												message: response.data.msg,
												duration: 2500
											});
										}
										this.deviceIntervalid = setInterval(() => {
											HttpServer.httpPost.call(
												this,
												"/Api/District/GetDevices", {
													userKeyId: parseInt(GloabFun.getKeyId()),
													districtid: this.districtForm.districtid,
													index: this.currentPage,
													pagesize: this.pageSize,
													isonline: this.onLine,
													category: this.modelArr,
													qDeviceName: this.searchType === 0 ? this.searchModel : "",
													qDeviceSn: this.searchType === 1 ? this.searchModel : "",
													model: []
												},
												function(res) {},
												function(res) {
													if(res.data.code === 0) {
														this.tableData = res.data.info;
														this.totalSize = res.data.totalcount;
														this.onlineTotal = res.data.onlinecount;
														this.offlineTotal = res.data.offlinecount;
													} else {}
												}
											);
										}, 5000);
									}
								);
							});
						})
						.catch(() => {
							this.$notify.info({
								title: "消息",
								message: this.$t("message.operationCanceled"),
								duration: 2500
							});
						});
				} else {
					this.$notify({
						title: this.$t("message.warning"),
						message: "请选择批量操作的设备",
						type: "warning",
						duration: 2500
					});
				}
			},
			//电脑批量关机
			multiPCClose() {
				if(this.formateSelection2().length > 0) {
					clearInterval(this.deviceIntervalid);
					this.$confirm("此操作将对所选设备进行远程关机操作，是否继续?", "提示", {
							confirmButtonText: "确定",
							cancelButtonText: "取消",
							type: "warning"
						})
						.then(() => {
							this.loading = true;
							this.controlResultDatas = this.multipleSelection;
							this.$nextTick(function() {
								HttpServer.httpPost.call(
									this,
									"/Api/PC/PCShutDown", {
										sns: [this.templateObj.sn],
										UserId: parseInt(GloabFun.getKeyId())
									},
									function(response) {},
									function(response) {
										// console.log('电脑批量远程关机', response);
										this.loading = false;
										if(response.data.code === 0) {
											if(response.data.response.length === 0) {
												this.controlResultDatas.forEach(function(item) {
													item.resultCode === -2;
												});
											} else {
												let vm = this;
												response.data.response.forEach(function(item1) {
													vm.controlResultDatas.forEach(function(item2) {
														if(item1.sn === item2.sn || item1.code === 0) {
															item2.resultCode === 0;
														} else {
															item2.resultCode === -1;
														}
													});
												});
											}
											this.controlDetailDialog = true;
										} else {
											this.$notify.error({
												title: "错误",
												message: response.data.msg,
												duration: 2500
											});
										}
										this.deviceIntervalid = setInterval(() => {
											HttpServer.httpPost.call(
												this,
												"/Api/District/GetDevices", {
													userKeyId: parseInt(GloabFun.getKeyId()),
													districtid: this.districtForm.districtid,
													index: this.currentPage,
													pagesize: this.pageSize,
													isonline: this.onLine,
													category: this.modelArr,
													qDeviceName: this.searchType === 0 ? this.searchModel : "",
													qDeviceSn: this.searchType === 1 ? this.searchModel : "",
													model: []
												},
												function(res) {},
												function(res) {
													if(res.data.code === 0) {
														this.tableData = res.data.info;
														this.totalSize = res.data.totalcount;
														this.onlineTotal = res.data.onlinecount;
														this.offlineTotal = res.data.offlinecount;
													} else {}
												}
											);
										}, 5000);
									}
								);
							});
						})
						.catch(() => {
							this.$notify.info({
								title: "消息",
								message: this.$t("message.operationCanceled"),
								duration: 2500
							});
						});
				} else {
					this.$notify({
						title: this.$t("message.warning"),
						message: "请选择批量操作的设备",
						type: "warning",
						duration: 2500
					});
				}
			},
			//批量删除
			deleteMultiple() {
				if(this.formateSelection().length > 0) {
					this.$confirm("此操作将删除该设备，是否继续?", "提示", {
							confirmButtonText: "确定",
							cancelButtonText: "取消",
							type: "warning"
						})
						.then(() => {
							// this.loading = true;
							HttpServer.httpPost.call(
								this,
								"/Api/District/DeviceUnBind", {
									districtId: this.districtForm.districtid,
									deviceId: this.formateSelection()
								},
								function(response) {},
								function(response) {
									// this.loading = false;
									if(response.data.code === 0) {
										this.findDistrictDevices();
										this.$notify({
											title: "成功",
											message: this.$t("message.bulkDeleteSuccess"),
											type: "success",
											duration: 2500
										});
									} else {
										this.$notify.error({
											title: "错误",
											message: response.data.msg,
											duration: 2500
										});
									}
								}
							);
						})
						.catch(() => {
							this.$notify.info({
								title: "消息",
								message: this.$t("message.operationCanceled"),
								duration: 2500
							});
						});
				} else {
					this.$notify({
						title: this.$t("message.warning"),
						message: this.$t("message.selectBulkDeleteWarning"),
						type: "warning",
						duration: 2500
					});
				}
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.findDistrictDevices();
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.findDistrictDevices();
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
				if(this.multipleSelection.length > 0) {
					clearInterval(this.deviceIntervalid);
				} else {
					this.deviceIntervalid = setInterval(() => {
						HttpServer.httpPost.call(
							this,
							"/Api/District/GetDevices", {
								userKeyId: parseInt(GloabFun.getKeyId()),
								districtid: this.districtForm.districtid,
								index: this.currentPage,
								pagesize: this.pageSize,
								isonline: this.onLine,
								category: this.modelArr,
								qDeviceName: this.searchType === 0 ? this.searchModel : "",
								qDeviceSn: this.searchType === 1 ? this.searchModel : "",
								model: []
							},
							function(res) {},
							function(res) {
								if(res.data.code === 0) {
									this.tableData = res.data.info;
									this.totalSize = res.data.totalcount;
									this.onlineTotal = res.data.onlinecount;
									this.offlineTotal = res.data.offlinecount;
								} else {}
							}
						);
					}, 5000);
				}
			},
			//设备详情
			showDetail(row) {
				clearInterval(this.deviceIntervalid);
				// this.$emit("changeView","WT01Detail",row);
				row.currentPage = this.currentPage;
				row.pageSize = this.pageSize;
				row.activeName = this.activeName;
				row.deviceType = this.deviceType;
				row.onlineType = this.onLine;
				row.currentNodeKey = this.currentNodeKey;
				if(row.category === "WeiTu") {
					this.$emit("changeView", "WTDetail", row);
				} else if(row.category === "BookCorner") {
					this.$emit("changeView", "BookCornerDetail", row);
				} else if(row.category === "MultimediaIT") {
					this.$emit("changeView", "TC1000Detail", row);
				} else if(row.category === "Self_ServiceMachine") {
					this.$emit("changeView", "AutoBookRacksDetail", row);
				} else if(row.category === "SafetyGate") {
					this.$emit("changeView", "SecureGateDetail", row);
				} else if(row.category === "VideoMonitor") {
					this.$emit("changeView", "HKDetail", row);
				} else if(row.category === "WirelessGateway") {
					this.$emit("changeView", "ZigBeeDetail", row);
				} else if(row.category === "PC") {
					this.$emit("changeView", "pcDetail", row);
				} else if(row.category === "ZNSJ") {
					this.$emit("changeView", "ZNSJDetail", row);
				} else if(row.category === "EBox") {
					this.$emit("changeView", "EBoxDetail", row);
				}
			},
			//刷新
			reloadDatas() {
				// this.loading = true;
				HttpServer.httpPost.call(
					this,
					"/Api/District/GetDevices", {
						userKeyId: parseInt(GloabFun.getKeyId()),
						districtid: this.districtForm.districtid,
						index: this.currentPage,
						pagesize: this.pageSize,
						isonline: this.onLine,
						category: this.modelArr,
						qDeviceName: this.searchType === 0 ? this.searchModel : "",
						qDeviceSn: this.searchType === 1 ? this.searchModel : "",
						model: []
					},
					function(res) {},
					function(res) {
						// this.loading = false;
						if(res.data.code === 0) {
							this.tableData = res.data.info;
							this.totalSize = res.data.totalcount;
							this.onlineTotal = res.data.onlinecount;
							this.offlineTotal = res.data.offlinecount;
							this.$notify({
								title: "成功",
								message: this.$t("message.refreshSuccess"),
								type: "success",
								duration: 2500
							});
						} else {
							this.$notify.error({
								title: "错误",
								message: res.data.msg,
								duration: 2500
							});
						}
					}
				);
			},
			selectOnOFF() {
				this.findDistrictDevices();
			},
			selectDeviceType() {
				this.findDistrictDevices();
			},
			//查询指定区域下的设备
			findDistrictDevices() {
				if(this.deviceType == "") {
					this.modelArr = [];
				} else {
					this.modelArr = [this.deviceType];
				}
				HttpServer.httpPost.call(
					this,
					"/Api/District/GetDevices", {
						userKeyId: parseInt(GloabFun.getKeyId()),
						districtid: this.districtForm.districtid,
						index: this.currentPage,
						pagesize: this.pageSize,
						isonline: this.onLine,
						category: this.modelArr,
						qDeviceName: this.searchType === 0 ? this.searchModel : "",
						qDeviceSn: this.searchType === 1 ? this.searchModel : "",
						model: []
					},
					function(res) {},
					function(res) {
						if(res.data.code === 0) {
							this.tableData = res.data.info;
							this.totalSize = res.data.totalcount;
							this.onlineTotal = res.data.onlinecount;
							this.offlineTotal = res.data.offlinecount;
						} else {
							this.$notify.error({
								title: "错误",
								message: res.data.msg,
								duration: 2500
							});
						}
					}
				);
			},
			//按照orderId大小排序
			sortDatas(arr) {
				for(var i = 0; i < arr.length; i++) {
					for(var j = i + 1; j < arr.length; j++) {
						if(arr[i].DistrictKeyId > arr[j].DistrictKeyId) {
							var tmp = arr[i];
							arr[i] = arr[j];
							arr[j] = tmp;
						}
					}
				}
				return arr;
			},
			//默认查询,用于左侧树状图展示
			getDatas() {
				HttpServer.httpGet.call(
					this,
					"/Api/District/districtTree?uid=" + parseInt(GloabFun.getKeyId()),
					function(response) {},
					function(response) {
						// console.log('获取当前用户的所有绑定区域信息',response)
						if(response.data.code === 0) {
							if(response.data.info.length > 0) {
								this.districtsDatas = this.sortDatas(response.data.info);
								this.defaultExpandedKeys.push(
									this.districtsDatas[0].DistrictKeyId
								);
								if(this.templateObj.sn && this.templateObj.sn != "") {
									this.currentNodeKey = this.templateObj.currentNodeKey;
									this.districtForm.districtid = this.templateObj.currentNodeKey;
								} else {
									this.currentNodeKey = this.districtsDatas[0].DistrictKeyId;
									this.districtForm.districtid = this.districtsDatas[0].DistrictKeyId;
								}

								HttpServer.httpGet.call(
									this,
									"/Api/Device/GetAllDeviceCategory?fromwhat=1",
									function(resp) {},
									function(resp) {
										resp.data.unshift({
											name: "",
											value: "全部"
										});
										this.deviceTypeDatas = resp.data;
										if(this.templateObj.sn && this.templateObj.sn != "") {
											let vm = this;
											this.deviceTypeDatas.forEach(function(item) {
												if(item.name === vm.templateObj.deviceType) {
													vm.deviceType = item.name;
												}
											});
										} else {
											this.deviceType = this.deviceTypeDatas[0].name;
										}
										this.findDistrictDevices();
									}
								);
							}
						} else {
							this.$notify.error({
								title: "错误",
								message: response.data.msg,
								duration: 2500
							});
						}
					}
				);
			}
		},
		watch: {
			multipleSelection() {
				if(this.multipleSelection.length > 0) {
					clearInterval(this.deviceIntervalid);
				}
			}
		},
		created() {
			if(this.templateObj.sn && this.templateObj.sn != "") {
				this.currentPage = this.templateObj.currentPage;
				this.pageSize = this.templateObj.pageSize;
				this.activeName = this.templateObj.activeName;
				this.onLine = this.templateObj.onlineType;
			}
			this.getDatas();
			this.deviceIntervalid = setInterval(() => {
				HttpServer.httpPost.call(
					this,
					"/Api/District/GetDevices", {
						userKeyId: parseInt(GloabFun.getKeyId()),
						districtid: this.districtForm.districtid,
						index: this.currentPage,
						pagesize: this.pageSize,
						isonline: this.onLine,
						category: this.modelArr,
						qDeviceName: this.searchType === 0 ? this.searchModel : "",
						qDeviceSn: this.searchType === 1 ? this.searchModel : "",
						model: []
					},
					function(res) {},
					function(res) {
						if(res.data.code === 0) {
							this.tableData = res.data.info;
							this.totalSize = res.data.totalcount;
							this.onlineTotal = res.data.onlinecount;
							this.offlineTotal = res.data.offlinecount;
						} else {}
					}
				);
			}, 5000);
		},
		beforeDestroy() {
			clearInterval(this.deviceIntervalid);
		}
	};
</script>
<style scoped>
	@import "../../../../assets/css/font-awesome-4.7.0/css/font-awesome.css";
</style>
<style scoped lang="less">
	.name {
		color: #20a0ff;
	}
	.areaSwitch{
        position: absolute;
        font-size: 30;
        color:  #EEF1F6;
        top: 65px;
        left: 10px;
        z-index: 10;
    }
    .deviceBox{
        width:85%;
        float:right;
    }
	.list {
		height: 500px;
		// max-height:580px;
		width: 14%;
		float: left;
		overflow: auto;
		// padding-top: 10px;
		// background-color: #324157;
		margin-bottom: 10px;
		.panel_title {
			height: 28px;
			line-height: 28px;
			font-size: 15px;
			text-align: center;
			border: 1px solid #e0e0e0;
			border-radius: 5px;
			color: #fff;
			background-color: #324157;
		}
		// color:#fff
	}
	
	.el-row {
		margin-bottom: 5px;
		.bg-purple {
			width: 100%;
			.detail-section {
				width: 100%;
				height: 130px;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				.section-top {
					width: 100%;
					height: 25%;
					display: flex;
					.panel-title {
						width: 100%;
						height: 100%;
						font-size: 20px;
						font-weight: bold;
						padding-left: 5px;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
				.section-bottom {
					width: 100%;
					height: 75%;
					display: flex;
					.section-left {
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						align-items: center;
						width: 40%;
						height: 100%;
						padding: 8px 5px;
						.img {
							width: 100%;
							height: 100%;
							img {
								height: 80%;
								width: 100%;
							}
						}
					}
					.section-right {
						text-align: left;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						// align-items: center;
						width: 60%;
						padding-top: 3px;
						height: 90%;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			}
		}
	}
	
	.grid-content {
		border: 1px solid #ffffff;
		height: 400px;
	}
	
	.grid-content1 {
		box-shadow: 0 1px 4px #000;
		// border: 1px solid #B0B0B0;
		border-radius: 5px;
		margin-top: 1px;
		height: 100%;
		cursor: pointer;
	}
	
	.grid-content1:hover {
		box-shadow: 0 1px 4px #000;
		border-radius: 5px;
		margin-top: 1px;
		height: 100%;
		cursor: pointer;
	}
	
	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}
    .mb5{
        margin-bottom: 5px;
    }
    @media screen and (max-width: 780px){
        .deviceBox{
            width: 100%;
            float: left;
        }
    }
</style>